import React, {Component} from 'react';
import {reqAllFiles, reqDeleteFile, reqFilesByName} from "../../../api";
import {formatDate} from "../../../util";
import {BASE_URL, BLOG_LIMIT} from "../../../config";
import {Card, Table, Tag, Image, Button, Popconfirm, message, Upload, Input} from "antd";
import {DeleteOutlined, UploadOutlined} from '@ant-design/icons';

class ImgFile extends Component {

    state = {
        files: [],
        current: 1,
        total: 0,
    }

    componentDidMount() {
        this.initFiles();
    }

    initFiles = async () => {
        let {current} = this.state;
        let {data} = await reqAllFiles(current);
        let {list, total} = data;
        this.setState({files: list, total});
    }

    deleteFile = async (id) => {
        let {status, msg} = await reqDeleteFile(id)
        if (status === 0) {
            message.success(msg);
            this.initFiles();
            return;
        }
        message.error(msg);
    }

    pageChange = ({current}) => {
        this.setState({current}, () => {
            this.initFiles();
        })
    }

    initFilesByName = async (name) => {
        let {data} = await reqFilesByName(name);
        this.setState({files: data});
    }

    search = (e) => {
        if (e.target.value.trim()) {
            this.initFilesByName(e.target.value)
            return;
        }
        this.initFiles();
    }

    columns = [
        {
            title: '文件名',
            dataIndex: 'fileName',
            render: (data) => {
                return <Tag color="geekblue">{data}</Tag>
            }
        },
        {
            title: '地址',
            dataIndex: 'url',
            render: (data) => {
                return <Tag color="green">{data}</Tag>
            }
        },
        {
            title: '预览',
            render: (data) => {
                let {url} = data;
                return <Image width={100} src={`${BASE_URL}/${url}`}/>
            }
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            render: (data) => {
                return formatDate("YYYY-MM-dd HH:mm:ss", data);
            }
        },
        {
            title: '操作',
            render: (data) => {
                let {id} = data;
                return (
                    <Popconfirm
                        title="确定删除吗 ?"
                        onConfirm={() => this.deleteFile(id)}
                        okText="Yes"
                        cancelText="No"
                    >
                        <Button danger icon={<DeleteOutlined/>}/>
                    </Popconfirm>
                )
            }
        },
    ];

    render() {
        let {files, current, total} = this.state;
        let {initFiles} = this;
        const props = {
            name: 'imgFile',
            action: `${BASE_URL}/files/upload`,
            headers: {
                authorization: 'authorization-text',
            },
            onChange(info) {
                if (info.file.status !== 'uploading') {
                    console.log(info.file, info.fileList);
                }
                if (info.file.status === 'done') {
                    message.success(`${info.file.name} 文件上传成功`);
                    initFiles();
                } else if (info.file.status === 'error') {
                    message.error(`${info.file.name} 文件上传失败`);
                }
            }
        }

        return (
            <Card title={<Input
                onPressEnter={this.search}
                placeholder="文件标题，回车搜索"  style={{width: 250}}/>}
                  extra={
                <Upload {...props}>
                    <Button icon={<UploadOutlined/>}>文件上传</Button>
                </Upload>}>
                <Table
                    size="small"
                    rowKey="id"
                    pagination={{
                        current, defaultPageSize: BLOG_LIMIT, total, showTotal: (total) => {
                            return `共 ${total} 个文件`
                        }
                    }}
                    dataSource={files}
                    onChange={this.pageChange}
                    columns={this.columns}/>
            </Card>
        );
    }
}

export default ImgFile;
